<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.rightInput{
	margin-left: -5px;
}
.indexPartsInput{
	pointer-events:none;
	background: rgb(179,183,186);
}

</style>
</head>
<body>
	<div class="container" id="content">
		<div class="container_fluid"
			style="height: 100%; width: 100%; position: relative;">
			<div id="map" style="height: 100%;"></div>
			<div style="filter: alpha(Opacity = 80); -moz-opacity: 0.5; opacity: 0.8; padding-right: 0em; padding-left: 0em;height: 40px; width: 100px; position: absolute; top: 10px; left: 20px;">
								<div class="input-group">
								<input type="text" id="search" class="form-control"
								placeholder="摄像头丨部件丨网格.." style="width: 240px;" /> 
								<span class="input-group-btn">
								<button type="button" class="btn btn-info searchBtn">查询</button>
								<button type="button" class="btn btn-info resetBtn">撤消</button>
								</span>
								</div>
							</div>
			<div id="eventInfoDiv" style="background: rgba(30,40,44,0.6); color: #f5f5f5; display: none; filter: alpha(Opacity = 80); -moz-opacity: 0.5; opacity: 0.8; padding: 10px;height: 400px; width: 300px; position: absolute; bottom: 10px; right : 20px;">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-4 control-label">事件名称</label>
						<div class="col-sm-8">
							<input type="text" class="form-control indexPartsInput" id="registerEventName" value="" readonly="readonly"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">登记时间</label>
						<div class="col-sm-8">
							<input type="text" class="form-control indexPartsInput" id="registerEventAccTime" value="" readonly="readonly"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">所属网格</label>
						<div class="col-sm-8">
							<input type="text" class="form-control indexPartsInput" id="gridName" value="" readonly="readonly"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">事件类型</label>
						<div class="col-sm-8">
							<input type="text" class="form-control indexPartsInput" id="eventName" value="" readonly="readonly"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">严重登记</label>
						<div class="col-sm-8">
							<input type="text" class="form-control indexPartsInput" id="registerEventSeriousLevelTitle" value="" readonly="readonly"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">内容</label>
						<div class="col-sm-8">
							<textarea class="form-control indexPartsInput" id="registerEventContent" readonly="readonly"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">备注</label>
						<div class="col-sm-8">
							<textarea class="form-control indexPartsInput" id="registerEventMemo" readonly="readonly"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class=""
				style="height: 300px; width: 600px; position: absolute; top: 10px; right: 10px;">
				<div class="col-xs-12 col-sm-12 col-md-12 pull-right"
					style="height: 100%; width: 100%;">
					<div id="redDiv">
						<div class="a-content" style="height: 300px; width: 600px">
							<div class="carousel-content" style="height: 300px; width: 600px">
								<ul class="carousel"
									style="height: 300px; width: 600px; margin: 0">
									<!-- <li><img src="/wcsi/plugins/MapIndex/images/pic2.png"/></li>
									<li><img src="/wcsi/plugins/MapIndex/images/pic3.png"/></li> -->
									<li>
										<table style="height: 300px; width: 600px;">
											<tr height="5%"></tr>
											<tr height="25%">
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: Blue; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em;">
															实时案件告警总数</p>
													</div>
												</td>
												<td width="33%"></td>
												<td width="33%"></td>
											</tr>
											<tr height="10%">
												<td id="realreportNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: Blue; padding-left: 25px"
													align="left"> <!-- <p style="font-weight:bold;font-size:35px;color:Blue;margin-left:25px;" id="realreportNum">
									2078
									</p> -->
												</td>
												<td width="33%"></td>
												<td width="33%"></td>
											</tr>
											<tr height="25%">
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: #66CD00; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em; margin-left: 5px;">
															已处理告警数</p>
													</div>
												</td>
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: #FFA500; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em; margin-left: 5px;">
															受理中告警数</p>
													</div>
												</td>
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: red; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em; margin-left: 5px;">
															未处理告警数</p>
													</div>
												</td>
											</tr>
											<tr height="10%">
												<td id="finishreportNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: #66CD00; padding-left: 25px"
													align="left"> <!-- <p style="font-weight:bold;font-size:35px;color:#66CD00;margin-left:25px;" id="finishreportNum">
									2078
									</p> -->
												</td>
												<td id="dealreportNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: #FFA500; padding-left: 25px"
													align="left"> <!-- <p style="font-weight:bold;font-size:35px;color:#FFA500;margin-left:25px;" id="dealreportNum">
									2078
									</p> -->
												</td>
												<td id="undealreportNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: red; padding-left: 25px"
													align="left"> <!-- <p style="font-weight:bold;font-size:35px;color:red;margin-left:25px;" id="undealreportNum">
									2078
									</p> -->
												</td>
											</tr>
											<tr height="25%"></tr>
										</table>

									</li>
									<li>
										<table style="height: 300px; width: 600px;">
											<tr height="5%"></tr>
											<tr height="25%">
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: Blue; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em;">
															部件实时在线数</p>
													</div>
												</td>
												<td width="33%"></td>
												<td width="33%"></td>
											</tr>
											<tr height="10%">
												<td id="realpartNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: Blue; padding-left: 25px"
													align="left"> <!-- <p style="font-weight:bold;font-size:35px;color:Blue;margin-left:25px;" id="realreportNum">
									2078
									</p> -->
												</td>
												<td width="33%"></td>
												<td width="33%"></td>
											</tr>
											<tr height="25%">
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: #66CD00; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em; margin-left: 5px;">
															正常部件数量</p>
													</div>
												</td>
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: #FFA500; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em; margin-left: 5px;">
															告警部件数量</p>
													</div>
												</td>
												<td style="width: 33%; vertical-align: middle"
													align="center">
													<div
														style="background-color: red; height: 50%; width: 90%;">
														<p
															style="font-weight: bold; font-size: 20px; color: white; line-height: 2em; margin-left: 5px;">
															故障部件数量</p>
													</div>
												</td>
											</tr>
											<tr height="10%">
												<td id="normalpartNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: #66CD00; padding-left: 25px"
													align="left"><!-- <p style="font-weight:bold;font-size:35px;color:#66CD00;margin-left:25px;" id="finishreportNum">
									2078
									</p> -->
												</td>
												<td id="alarmpartNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: #FFA500; padding-left: 25px"
													align="left"><!-- <p style="font-weight:bold;font-size:35px;color:#FFA500;margin-left:25px;" id="dealreportNum">
									2078
									</p> -->
												</td>
												<td id="breakdownpartNum"
													style="width: 33%; vertical-align: top; font-weight: bold; font-size: 35px; color: red; padding-left: 25px"
													align="left"><!-- <p style="font-weight:bold;font-size:35px;color:red;margin-left:25px;" id="undealreportNum">
									2078
									</p> -->
												</td>
											</tr>
											<tr height="25%"></tr>
										</table>
									</li>
									<!-- <li><img src="/wcsi/plugins/MapIndex/images/pic4.png"/></li>
									<li><img src="/wcsi/plugins/MapIndex/images/pic5.png"/></li> -->
								</ul>
								<ul class="img-index"></ul>
								<div class="carousel-prev">
									<img src="/wcsi/plugins/MapIndex/images/left1.png" />
								</div>
								<div class="carousel-next">
									<img src="/wcsi/plugins/MapIndex/images/right1.png" />
								</div>
							</div>
						</div>
					</div>
					<div id="greenDiv">
						<button id="moveLeftButton" type="button" class="pull-right"></button>
					</div>
				</div>
			</div>
			<!-- 左下角部分 -->
			<div style="height: 100px; width: 400px; position: absolute; bottom: 100px; left: 10px;">
				<div class="col-xs-12 col-sm-12 col-md-12" style="height: 100%; width: 100%;">
					<nav id="gooey-h" style="width: 100%; position: absolute; bottom: 5px; left: 10px">
						<input type="checkbox" class="menu-open" name="menu-open2"
							id="menu-open2" />
						<label class="open-button" for="menu-open2">
							<span class="burger burger-1"></span>
							<span class="burger burger-2"></span>
							<span class="burger burger-3"></span>
						</label>
						<a class="gooey-menu-item" style="opacity: 0.5" data="part">
							<i class="glyphicon glyphicon-info-sign"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a>
						<a class="gooey-menu-item" style="opacity: 0.5" data="grid">
							<i class="glyphicon glyphicon-th"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a>
						<a class="gooey-menu-item" style="opacity: 0.5" id="videototal">
							<i class="glyphicon glyphicon-facetime-video"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a>
						<a class="gooey-menu-item" style="opacity: 0.5" data="tools">
							<i class="glyphicon glyphicon-cog"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a>
						<a class="gooey-menu-item" style="opacity: 0.5" data="dept">
							<i class="glyphicon glyphicon-user"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a>
						<a class="gooey-menu-item" style="opacity: 0.5" data="event" openMoal="true">
							<i class="glyphicon glyphicon-screenshot"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a>
						<!-- <a class="gooey-menu-item" style="opacity: 0.5" data="ref"  href="javascript:window.open('//39.107.125.44:8888/qtouch_demo/bigscr');" target="_blank">
							<i class="glyphicon glyphicon-export"
							style="font-size: 55px; color: white;height: 72px;line-height: 72px;"></i>
						</a> -->
					</nav>
				</div>
				<div id="part" class="listdt" style="display:none;height: 240px; width: 200px; position: absolute; bottom: 90px; left: 50px; overflow:auto ;overflow-x:hidden">
					<dl class="list_dl">
				    </dl>
				</div>
				<div id="grid" class="listdt" style="display:none;height: 240px; width: 200px; position: absolute; bottom: 90px; left: 120px; overflow:auto ;overflow-x:hidden">
					<dl class="list_dl">
				    </dl>
				</div>
				<div id="video" class="listdt" style="display:none;height: 240px; width: 200px; position: absolute; bottom: 90px; left: 190px; overflow:auto ;overflow-x:hidden">
					<dl class="list_dl">
					<div class="video"> 视频</div>
				    </dl>
				</div>
				<div id="tools" class="listdt" style="display:none;height: 240px; width: 200px; position: absolute; bottom: 90px; left: 280px; overflow:auto ;overflow-x:hidden">
					<!-- <dl class="list_dl">
				    </dl> -->
				    <dt class="list_dt toolsdt" id="drawpolyline"><span class="_after"></span><p>测距</p></dt>
				    <dt class="list_dt toolsdt" id="drawpolygon"><span class="_after"></span><p>测面</p></dt>
				    <dt class="list_dt toolsdt" id="exchangeTwoD"><span class="_after"></span><p id="twoDState">2.5D隐藏</p></dt>
				    <dt class="list_dt toolsdt" id="selectTV"><span class="_after"></span><p>框选TV</p></dt>
				    <dt class="list_dt toolsdt" id="canceldraw"><span class="_after"></span><p>取消操作</p></dt>
				    <dt class="list_dt toolsdt" id="cleardraw"><span class="_after"></span><p>清除历史</p></dt>
				    
				</div>
				<div id="dept" class="listdt" style="display:none;height: 240px; width: 200px; position: absolute; bottom: 90px; left: 350px; overflow:auto ;overflow-x:hidden">
					<dl class="list_dl">
				    </dl>
				</div>
			</div>
		</div>
		
		
		<!-- Modal -->  
		<div class="modal fade" id="partModal" tabindex="-1" role="dialog" aria-hidden="true">  
			<div class="modal-dialog modal-lg">
				<div class="modal-content" style="width:1044px; height: 4em;">
					<div class="modal-header my-modal-header">
						<button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
						<h2 class="modal-title my-modal-title" >部件信息</h2>
					</div>
					<div class="modal-body my-modal-body">
						<iframe id="partIframe" src="" style="width:1044px;height:480px;"></iframe>
					</div>
				</div>
			</div>
		</div>


		<!-- Modal -->  
		<div class="modal fade" id="gridModal" tabindex="-1" role="dialog" aria-hidden="true">  
			<div class="modal-dialog modal-lg">
				<div class="modal-content" style="width:800px; height: 4em;">
					<div class="modal-header my-modal-header">
						<button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
						<h2 class="modal-title my-modal-title" >网格信息</h2>
					</div>
					<div class="modal-body my-modal-body">
						<iframe id="gridIframe" src="" style="width:800px;height:450px;"></iframe>
					</div>
				</div>
			</div>
		</div>
		
		<div class="modal fadeDept" id="deptModal" tabindex="-1" role="dialog" aria-hidden="true">  
			<div class="modal-dialog modal-lg">
				<div class="modal-content" style="width:1000px; height: 4em;">
					<div class="modal-header my-modal-header">
						<button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
						<h2 class="modal-title my-modal-title" >人员信息</h2>
					</div>
					<div class="modal-body my-modal-body">
					  <input type="hidden" id="userList"/>
						<iframe id="deptIframe" src="" style="width:1000px;height:750px;"></iframe>
					</div>
				</div>
			</div>
		</div>
		
		<div class="modal fade" id="shopModal" tabindex="-1" role="dialog" aria-hidden="true">  
			<div class="modal-dialog modal-lg">
				<div class="modal-content" style="width:1044px; height: 4em;">
					<div class="modal-header my-modal-header">
						<button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
						<h2 class="modal-title my-modal-title" >商铺信息</h2>
					</div>
					<div class="modal-body my-modal-body">
						<iframe id="shopIframe" src="" style="width:1044px;height:500px;"></iframe>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-hidden="true">  
			<div class="modal-dialog modal-lg">
				<div class="modal-content" style="width:1044px; height: 4em;">
					<div class="modal-header my-modal-header">
						<button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
						<h2 class="modal-title my-modal-title" >人员信息</h2>
					</div>
					<div class="modal-body my-modal-body">
						<iframe id="userIframe" src="" style="width:1044px;height:500px;"></iframe>
					</div>
				</div>
			</div>
		</div>
		
		<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-hidden="true">  
			<div class="modal-dialog modal-lg">
				<div class="modal-content" style="width:1044px; height: 4em;">
					<div class="modal-header my-modal-header">
						<button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
						<h2 class="modal-title my-modal-title" >事件信息</h2>
					</div>
					<div class="modal-body my-modal-body">
						<iframe id="eventIframe" src="" style="width:1044px;height:500px;"></iframe>
					</div>
				</div>
			</div>
		</div>
		
		<div class="modal fade " id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
		    <div class="modal-dialog">
		        <div class="modal-content qTouchIndexBackground">
		            <div class="modal-header my-modal-header qTouchIndexHeadBackground">
		            <button type="button" class="close" data-dismiss="modal" style="opacity :1 !important;margin: 0px;height: 100%;padding-right: 10px;"  aria-hidden="true"><a style="color: white;"><i class="glyphicon glyphicon-remove" style="font-size: 2em;"></i></a></button>
		           		<div class="col-sm-3	">
			                <h4 class="modal-title my-modal-title">
			                    监控详细
			                </h4>
		                </div>
		                <div class="col-sm-3">
		                	<img src="../img/index/left.png" class="" alt="上一页" style="float:left;width: 2.5em;" id="previousPage"/>
			                <h4 class="modal-title" id="" style="float:left;margin-top: 3px; font-size: 2em; color: white;">
			                    &nbsp;上一页
			                </h4>
		                </div>
		                <div class="col-sm-1">
			                <h4 class="modal-title" style="float:left;margin-top: 3px; font-size: 2em; color: white;" id="pageNum">
			                    1
			                </h4>
		                </div>
		                <div class="col-sm-3">
			                <h4 class="modal-title" id="" style="float:left;margin-top: 3px; font-size: 2em; color: white;">
			                    下一页&nbsp;
			                </h4>
			                <img src="../img/index/right.png" class="" alt="下一页" style="float:left;width: 2.5em;" id="nextPage"/>
		                </div>
		            </div>
		            <div id="TVdiv" class="modal-body">
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<link rel="stylesheet" type="text/css" media="all" th:href="@{/plugins/MapIndex/stylesheets/QTouchIndexvideo.css}" />
		
		<link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/stylesheets/myMain.css}" />
		<link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/stylesheets/rightCorner.css}" />
		<link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/plugins/stylesheets/gooey.min.css}" />
		<link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/plugins/stylesheets/livedemo.css}" />
		<link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/plugins/stylesheets/reset.css}" />
		<!-- <link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/plugins/stylesheets/typography.css}" /> -->
		<!-- <link rel="stylesheet" type="text/css" media="all"
	th:href="@{/plugins/MapIndex/plugins/stylesheets/styles.css}" /> -->
		<link rel="stylesheet" type="text/css" media="all"
			th:href="@{/plugins/MapIndex/plugins/stylesheets/github.css}" />
		<script th:src="@{/plugins/MapIndex/javascripts/rightCorner.js}"></script>
		<script th:src="@{/plugins/MapIndex/javascripts/leftCorner.js}"></script>
		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/vendor/gooey.min.js}"></script>
		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/vendor/waypoints.min.js}"></script>
		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/vendor/waypoints-sticky.min.js}"></script>
		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/vendor/jquery.hideseek.min.js}"></script>
		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/vendor/rainbow-custom.min.js}"></script>
		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/vendor/jquery.anchor.js}"></script>
			
<!-- 		<script
			th:src="@{/plugins/MapIndex/plugins/javascripts/initializers.js}"></script> -->
			
		<!-- <link rel="stylesheet" type="text/css"
			href="http://39.104.15.140/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css" />
		<link rel="stylesheet" type="text/css"
			href="http://39.104.15.140/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
		<script type="text/javascript"
			src="http://39.104.15.140/arcgis_js_api/library/3.16/3.16/init.js"></script> -->
		<link rel="stylesheet" type="text/css"
			href="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css" />
		<link rel="stylesheet" type="text/css"
			href="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
		<script type="text/javascript"
			src="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/init.js"></script>
		<script th:src="@{/index/indexmap.js}"></script>
	</div>
</body>

</html>
